<!DOCTYPE html>
<html>


<!-- Mirrored from www.zi-han.net/theme/hplus/form_advanced.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:19:16 GMT -->
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HOP - 图片裁剪工具</title>
    <meta name="keywords" content="HOP,黑鸥菩,黑鸥菩科技,黑鸥菩科技有限公司,响应式后台">
    <meta name="description" content="HOP黑鸥菩科技有限公司">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="../css/plugins/cropper/cropper.min.css" rel="stylesheet">
    <link href="../css/animate.min.css" rel="stylesheet">
    <link href="../css/style.min.css?v=4.1.0" rel="stylesheet">
    <style>
        .img-preview-sm{
            height: 200px;
            width: 200px;
            float: left;
            margin-right: 24px;
        }
    </style>

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title  back-change">
                    <h5>图片裁剪 <small>http://fengyuanchen.github.io/cropper/</small><font style="color: red">【图片过大会影响裁剪，请使用小图】</font></h5>
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="image-crop">
                                <img src="../img/noimg.png">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <h4>图片预览：</h4>
                            <div style="height: 200px;width: 100%;">
                                <div class="img-preview img-preview-sm"></div>
                                <div class="img-preview img-preview-sm" style="border-radius: 50%"></div>
                            </div>
                            <br />
                            <div class="btn-group">
                                <label title="上传图片" for="inputImage" class="btn btn-primary">
                                    <input type="file" accept="image/*" name="file" id="inputImage" class="hide"> 上传新图片
                                </label>
                                <label title="下载图片" id="download" class="btn btn-primary">下载</label>
                            </div>
                            <div class="btn-group">
                                <button class="btn btn-white" id="zoomIn" type="button">放大</button>
                                <button class="btn btn-white" id="zoomOut" type="button">缩小</button>
                                <button class="btn btn-white" id="rotateLeft" type="button">左旋转</button>
                                <button class="btn btn-white" id="rotateRight" type="button">右旋转</button>
                                <button class="btn btn-warning" id="setDrag" type="button">提交</button>
                                <a href="javascript:parent.layer.closeAll();" class="btn btn-default">关 闭</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../js/jquery.min.js?v=2.1.4"></script>
<script src="../js/bootstrap.min.js?v=3.3.6"></script>
<script src="../js/plugins/layer/layer.min.js"></script>
<script src="../js/plugins/cropper/cropper.min.js"></script>
<script src="../../common/js/common.js"></script>
<script>
    var o=$(".image-crop > img");
    $(o).cropper({
        preview:".img-preview",// 预览视图
        guides : false, // 裁剪框的虚线(九宫格)
        autoCropArea : 0.5, // 0-1之间的数值，定义自动剪裁区域的大小，默认0.8
        movable : true, // 是否允许移动图片
        dragCrop : true, // 是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域
        movable : true, // 是否允许移动剪裁框
        resizable : true, // 是否允许改变裁剪框的大小
        zoomable : true, // 是否允许缩放图片大小
        mouseWheelZoom : true, // 是否允许通过鼠标滚轮来缩放图片
        touchDragZoom : true, // 是否允许通过触摸移动来缩放图片
        rotatable : true, // 是否允许旋转图片
        crop : function(e) {
            // 输出结果数据裁剪图像。
            console.log(e);
        },
        done:function(){

        }
    });
    var r=$("#inputImage");
    window.FileReader?r.change(function(){
            var e,i=new FileReader,t=this.files;
            t.length&&(e=t[0],/^image\/\w+$/.test(e.type)?(i.readAsDataURL(e),
                    i.onload=function(){
                    r.val(""),o.cropper("reset",!0).cropper("replace",this.result)}
                    ):showMessage("请选择图片文件"))
    }):r.addClass("hide"),
    $("#download").click(function(){
        //console.log(o.cropper("getDataURL"))
        downloadFile("hop-img-cropper",o.cropper("getDataURL"))
    }),
    $("#zoomIn").click(function(){o.cropper("zoom",.1)}),
    $("#zoomOut").click(function(){o.cropper("zoom",-.1)}),
    $("#rotateLeft").click(function(){o.cropper("rotate",45)}),
    $("#rotateRight").click(function(){o.cropper("rotate",-45)}),
    $("#setDrag").click(function(){
        //o.cropper("setDragMode","crop")
        var base64Img = o.cropper('getDataURL');// 获取被裁剪后的base64图片
        console.log(base64Img)
        var url = sessionStorageUtils.getJson(storageKey.sessionStorageKey.uploadFile.requstUrl)
        if(empty(url)){
            window.location.href = sessionStorageUtils.getJson(storageKey.sessionStorageKey.loginPath);
        }
        uploadFile(url,base64Img);
    })

    //ajax请求上传
    function uploadFile(url,file) {
        var index = parent.layer.load();
         $.ajax({
             url : url,
             type : 'POST',
             data : {
                 file:file
             },
             async : true,
             headers: {
                 'Authorization':sessionStorageUtils.getJson(storageKey.sessionStorageKey.token),
                 'permCoding':''
             },
             success : function(data) {
                console.log(data)
                 if(Boolean(data.status)){
                     sessionStorageUtils.setJsonStr(storageKey.sessionStorageKey.uploadFile.attachmentId,data.attachemId);
                     sessionStorageUtils.setJsonStr(storageKey.sessionStorageKey.uploadFile.showUrl,data.fileUrl);
                     parent.layer.closeAll();
                 }else {
                     layer.msg(data.msg, {time: 1500, icon:5});
                 }
             },
             error :function (res) {
                 console.log(res)
                 layer.msg(res.responseJSON.msg, {time: 1500, icon:5});
             }
         });
     }
</script>
</body>
</html>
